<!--
 * @FileDescription: home主页左侧Tab
 * @Author: 祝小文
 * @Date: 2022-09-28 10:45
 * @LastEditors: 祝小文
 * @LastEditTime: 2022-09-28 10:45
-->
<script setup lang="ts">
const activeIndex = ref(0) //当前tab选中项

/** 左侧tab点击事件 通知父组件切换内容 */
const emit = defineEmits(['tabClick'])
const tabClick = (id: number) => {
  activeIndex.value = id
  emit('tabClick', id)
}

/**
 * 监听作战标绘面板点击
 */
const firefightPlotStore = useFirefightPlotStore()
watch(
  () => [firefightPlotStore.returnBackLayerControlFlag, firefightPlotStore.isLayerControlFlag],
  (newV) => {
    if (newV[0] || newV[1]) {
      activeIndex.value = 6
    }
  },
  {
    immediate: true,
  }
)
</script>

<template>
  <div id="tab-left-container">
    <div
      class="tab-item factoryinfo-icon"
      :class="{
        'factoryinfo-active-icon': activeIndex === 0,
        'active-color ': activeIndex === 0,
      }"
      @click="tabClick(0)"
    >
      <span>企业信息</span>
    </div>

    <div
      class="tab-item productionstorage-icon"
      :class="{
        'productionstorage-active-icon': activeIndex === 1,
        'active-color ': activeIndex === 1,
      }"
      @click="tabClick(1)"
    >
      <span>生产存储</span>
    </div>

    <div
      class="tab-item firefightingfacilities-icon"
      :class="{
        'firefightingfacilities-active-icon': activeIndex === 2,
        'active-color ': activeIndex === 2,
      }"
      @click="tabClick(2)"
    >
      <span>消防设施</span>
    </div>

    <div
      class="tab-item enterprisefacilities-icon"
      :class="{
        'enterprisefacilities-active-icon': activeIndex === 3,
        'active-color ': activeIndex === 3,
      }"
      @click="tabClick(3)"
    >
      <span>企业设施</span>
    </div>

    <div
      class="tab-item professionalteam-icon"
      :class="{
        'professionalteam-active-icon': activeIndex === 4,
        'active-color ': activeIndex === 4,
      }"
      @click="tabClick(4)"
    >
      <span>企业专职队</span>
    </div>

    <div
      class="tab-item modelset-icon"
      :class="{
        'modelset-active-icon': activeIndex === 5,
        'active-color ': activeIndex === 5,
      }"
      @click="tabClick(5)"
    >
      <span>模型设置</span>
    </div>
    <div
      class="tab-item plot-icon"
      :class="{
        'plot-active-icon': activeIndex === 6,
        'active-color ': activeIndex === 6,
      }"
      @click="tabClick(6)"
    >
      <span>作战标绘</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
#tab-left-container {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  z-index: 10;
  .tab-item {
    width: 231px;
    height: 60px;
    line-height: 60px;
    margin-bottom: 20px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    span:first-child {
      margin-left: 75px;
      margin-bottom: 10px;
      font-size: 24px;
      color: #fff;
    }
  }

  .factoryinfo-icon {
    background-image: url(@/assets/image/collection/leftTabBck/factoryinfo-icon.png);
  }
  .factoryinfo-active-icon {
    background-image: url(@/assets/image/collection/leftTabBck/factoryinfo-active-icon.png);
  }

  .productionstorage-icon {
    background-image: url(@/assets/image/collection/leftTabBck/productionstorage-icon.png);
  }
  .productionstorage-active-icon {
    background-image: url(@/assets/image/collection/leftTabBck/productionstorage-active-icon.png);
  }

  .firefightingfacilities-icon {
    background-image: url(@/assets/image/collection/leftTabBck/firefightingfacilities-icon.png);
  }
  .firefightingfacilities-active-icon {
    background-image: url(@/assets/image/collection/leftTabBck/firefightingfacilities-active-icon.png);
  }

  .enterprisefacilities-icon {
    background-image: url(@/assets/image/collection/leftTabBck/enterprisefacilities-icon.png);
  }
  .enterprisefacilities-active-icon {
    background-image: url(@/assets/image/collection/leftTabBck/enterprisefacilities-active-icon.png);
  }

  .professionalteam-icon {
    background-image: url(@/assets/image/collection/leftTabBck/professionalteam-icon.png);
  }
  .professionalteam-active-icon {
    background-image: url(@/assets/image/collection/leftTabBck/professionalteam-active-icon.png);
  }

  .modelset-icon {
    background-image: url(@/assets/image/collection/leftTabBck/modelset-icon.png);
  }

  .modelset-active-icon {
    background-image: url(@/assets/image/collection/leftTabBck/modelset-active-icon.png);
  }
  .plot-icon {
    background-image: url(@/assets/image/collection/leftTabBck/firefight-plot.png);
  }

  .plot-active-icon {
    background-image: url(@/assets/image/collection/leftTabBck/firefight-plot-active.png);
  }

  .active-color {
    font-weight: 700;
  }
}
</style>
